<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
    
      </div>
      <el-table :data="apps" border style="width: 100%">
        <el-table-column prop="avatar" label="icon" style="width: 20%">
              <template slot-scope="scope">
                  <img width=50 height=50 v-if="scope.row.icon && scope.row.icon.length>0" :src="scope.row.icon">
                  <span v-else>image</span>
              </template>
          </el-table-column>
        <el-table-column prop="name" label="名称" style="width: 20%"></el-table-column>
         <el-table-column prop="type" label="类型" style="width: 50%"></el-table-column>
          <el-table-column prop="used" label="启用" style="width: 50%">
               <template slot-scope="scope">
                  <span style="color:green" v-if="scope.row.used">启用</span>
                  <span style="color:red" v-else>禁用</span>
              </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" style="width: 50%"></el-table-column>
    
        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="roles(scope.row)">功能</el-button>
            <el-button type="text" size="small" @click="used(scope.row)" v-if="scope.row.used" >禁用</el-button>
            <el-button type="text" size="small" @click="used(scope.row)" v-else >启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { control_list,app_used} from "@/request/api.js";
export default {
  methods: {
    loadPage() {
      control_list().then(res => {
        this.apps = res.data;
      });
    },
    //更改app状态
    used(row){
      app_used(row.id,!row.used).then(res => {
          row.used=!row.used;
      });
    },
    //app详细
    detail(row){
       this.$router.push({"path":"/app/detail","query":{id:row.id}});
    },
      //app功能角色
    roles(row){
       this.$router.push({"path":"/app/roles","query":{id:row.id,name:row.name}});
    }
  },

  mounted() {
    this.loadPage();
  },

  data() {
    return {
      apps: []
    };
  }
};
</script>